{extend name="base"/}
{block name="main"}
<link rel="stylesheet" type="text/css" href="/public/css/defau.css">
<style>
    input[type="checkbox"] + label::before {
        content: "\a0";  /*不换行空格*/
        display: inline-block;
        vertical-align: .2em;
        height: 18px;
        width: 18px;
        font-size: 22px;
        margin-right: .2em;
        border-radius: .2em;
        background-color: white;
        border: 1px solid #93a1a1;
        text-indent: .15em;
        line-height: .65;  /*行高不加单位，子元素将继承数字乘以自身字体尺寸而非父元素行高*/
    }
    input[type="checkbox"]:checked + label::before {
        content: "\2714";
        background-color:#00a0e9;
        color: white;
        height: 18px;
        width: 18px;
        font-size: 22px;
    }
    input[type="checkbox"] {
        position: absolute;
        clip: rect(0, 0, 0, 0);
        cursor:pointer;
    }
</style>
<article class="cl pd-20">
<div id="tab_demo" class="HuiTab" style="margin-top: 0px; position: relative;">
                        <div class="tabBar clearfix">
                            <span onclick="window.location.href='{:url('goods/goodsCategoryList')}'">分类列表</span>
                           <span class="current" onclick="window.location.href='{:url('goods/goods_add_cate')}'">添加分类</span>
                        </div>
                    </div>
    <form action="" method="post" class="form form-horizontal" id="">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>分类名称：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" autocomplete="off" value="" placeholder="分类名称" class="input-text" id="cate_name"
                       name="supplier_name">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>分类简称：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" autocomplete="off" value="" placeholder="分类简称" class="input-text" id="short_name"
                       name="name">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">上级分类：</label>
            <div class="formControls col-xs-8 col-sm-9">
                    <select name="search_type" id="pid" class="input-text">
                        <option value="0">顶级分类</option>
                        {foreach name="category_list" item="v1"}
                        <option value="{$v1['cate_id']}">{$v1['cate_name']}</option>
                        {foreach name="v1['child_list']" item="v2"}
                        <option value="{$v2['cate_id']}">&nbsp;&nbsp;&nbsp;&nbsp;{$v2['cate_name']}</option>
                        {/foreach}
                        {/foreach}
                    </select>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">是否显示：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="checkbox" checked id="is_visible">
                <label for="is_visible">&nbsp;</label>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">关键字：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" autocomplete="off" value="" class="input-text" placeholder="关键字" id="keywords">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">排序：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" autocomplete="off" value="" class="input-text" placeholder="排序" id="sort">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">图片：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <p style="height: 165px;width:165px;border: dashed 1px #e5e5e5">
                    <img src="" alt="" id="imgcate_pic" class="thumbnail">
                </p>
<div style="position: absolute;top:50px;left:200px;color: #ccc;"><br>
建议图片尺寸：200*200px<br>
</div>
                <div class="upload-btn">
				<span>
					<input type="hidden" value="" id="cate_pic"/>
				</span>
                    <input onclick="select_img('1','zhu');" class="btn btn-default" type="button" value="选择图片">
                </div>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">备注：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <textarea name="" cols="" rows="" id="description" class="textarea" placeholder="说点什么...100个字符以内"
                          dragonfly="true"></textarea>
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <input class="btn btn-primary radius" onclick="addSuppAjax()" type="button"
                       value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
            </div>
        </div>
    </form>
</article>
{/block}
{block name="script"}
<script src="/public/js/ajax_file_upload.js" type="text/javascript"></script>
<script src="/public/js/file_upload.js" type="text/javascript"></script>
<script src="/public/menu/js/jquery.artdialog.js"></script>
<script src="/public/menu/js/iframetools.js"></script>
<script type="text/javascript">
    //模块输入信息验证
    function verify( category_name,short_name,pid) {
        if(category_name == ''){
            layer.msg('请输入名称！',{icon:5,time:1000});
            return false;
        }
        if(short_name == ''){
            layer.msg('请输入简称！',{icon:5,time:1000});
            return false;
        }
        return true;
    }
    var flag = false;//防止重复提交
    //添加用户
    function addSuppAjax() {
        var cate_name = $("#cate_name").val();
        var short_name = $("#short_name").val();
        var pid = $("#pid").val();
        var keywords = $("#keywords").val();
        var sort = $("#sort").val();
        var description = $("#description").val();
        var cate_pic = $("#cate_pic").val();
        if($("#is_visible").prop("checked")){
            var is_visible = 1;
        }else{
            var is_visible = 0;
        }
        if (verify(cate_name,short_name,pid) && !flag) {
            flag = true;
            $.ajax({
                type : "post",
                url : "{:url('goods/goods_add_cate')}",
                data : {
                    'cate_name' : cate_name,
                    'pid' : pid,
                    'keywords' : keywords,
                    'sort' : sort,
                    'description' : description,
                    'is_visible' : is_visible,
                    "cate_pic" : cate_pic,
                    "short_name" : short_name,
                },
                success : function(data) {
                    if (data["code"] > 0) {
                        layer.msg('添加成功',{icon:1,time:1000},function () {
                            window.parent.location.href="{:url('goods/goodsCategoryList')}";
                        });
                    }else{
                        var msg = data['message'];
                        msg = !msg ? "添加失败" : msg;
                        layer.msg(msg, {icon: 2, time: 1000});
                        flag = false;
                    }
                }
            });
        }
    }
    function zhu_images(id,path) {
        $("#cate_pic").val(path);
        $("#imgcate_pic").attr('src',path);
    }
    function select_img(number,type) {
        art.dialog.open(('__CONF_SITE__admin/images/dialogalbumlist&number=' + number + '&type=' + type), {
            lock : true,
            title : "我的图片",
            width : 900,
            height : 620,
            drag : false,
            background : "#000000",
            scrollbar:false,
        }, true);
    }
</script>
{/block}